<template>
	<main-container>
		<!-- 搜索 -->
		<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
			<el-form-item label="物流名称">
				<el-input v-model="queryParams.name" clearable></el-input>
			</el-form-item>
			<el-form-item label="物流编码">
				<el-input v-model="queryParams.code" clearable></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="initPage">
					<el-icon> <ele-Search /> </el-icon>搜索</el-button>
				<el-button @click="resetQuery">
					<el-icon> <ele-Refresh /> </el-icon>重置</el-button>
			</el-form-item>
		</el-form>
		<Form ref="refForm" @initPage="initPage"></Form>
		<!-- 工具栏 -->
		<div class="hx-table-toolbar">
			<div>
				<el-button type="primary" @click="add"><el-icon> <ele-Plus /> </el-icon>新增</el-button>
			</div>
			<right-toolbar :searchBtn="true" :refreshBtn="true" @search="showSearch = !showSearch"
				@refresh="initPage"></right-toolbar>
		</div>
		<el-table :data="tableData" v-loading="loading" border>
			<el-table-column prop="name" label="物流名称" />
			<el-table-column prop="code" label="物流编码" />
			<el-table-column prop="status" label="状态">
				<template #default="scope">
					<el-tag v-if="scope.row.status == '0'" type="danger">停用</el-tag>
					<el-tag v-if="scope.row.status == '1'" type="success">正常</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="200" align="center">
				<template #default="scope">
					<el-button link type="primary" @click="edit(scope.row)"><el-icon> <ele-Edit /> </el-icon>修改</el-button>
					<el-button link type="danger" @click="del(scope.row.id)"><el-icon> <ele-Delete />
						</el-icon>删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页 -->
		<pagination v-model:total="page.total" v-model:currentPage="page.currentPage" v-model:pageSize="page.pageSize"
			@changePage="initPage"></pagination>
	</main-container>
</template>
<script lang="ts">
import { defineComponent, defineAsyncComponent, ref, reactive, toRefs } from 'vue';
import { getPage } from '/@/api/mall/logisticscompany';
import { ElMessageBox, ElMessage } from 'element-plus';
export default defineComponent({
	name: 'logisticscompany',
	components: { Form: defineAsyncComponent(() => import('./form.vue')) },
	setup() {
		const data = reactive({
			queryParams: { name: '', code: '' },
			page: {
				total: 0,
				currentPage: 1,
				pageSize: 10,
				ascs: [],
				descs: 'create_time',
			},
			tableData: [],
			rules: {
				type: [
					{
						required: true,
						message: 'Please select Activity zone',
						trigger: 'change',
					},
				],
			},
			loading: false,
		});
		const showSearch = ref(true);
		const refForm = ref();
		const initPage = async () => {
			data.loading = true;
			let params = {
				current: data.page.currentPage,
				size: data.page.pageSize,
				ascs: data.page.ascs,
				descs: data.page.descs,
			};
			await getPage(Object.assign(params, data.queryParams))
				.then((response: any) => {
					data.tableData = response.data.data.records;
					data.page.total = response.data.data.total;
					data.loading = false;
				})
				.catch(() => {
					data.loading = false;
				});
		};
		/**
		 * 新增按钮
		 */
		const add = () => {
			refForm.value.initForm();
		};
		/**
		 * 修改按钮
		 */
		const edit = (row: any) => {
			refForm.value.initForm(row);
		};
		/**
		 * 删除按钮
		 */
		const del = (id: string) => {
			ElMessageBox.confirm('此操作将删除该物流公司，是否继续?', '提示', {
				confirmButtonText: '确认',
				cancelButtonText: '取消',
				type: 'warning',
			}).then(() => { });
		};
		/**
	 * 重置搜索表单
	 */
		const resetQuery = () => {
			data.queryParams = { name: '', code: '' };
		};
		initPage();
		return {
			refForm,
			showSearch,
			add,
			del,
			edit,
			initPage,
			resetQuery,
			...toRefs(data),
		};
	},
});
</script>
<style lang="scss" scoped></style>
